<template>
  <div class="btn" v-if="!isPrintShortcutPressed">
    <el-button type="primary" @click="addTop">增加上边距</el-button>
    <el-button type="primary" @click="rmoveTop">减少上边距</el-button>
  </div>
  <div v-if="data.length === 0">
    <el-skeleton :rows="5" />
    <el-skeleton :rows="5" />
  </div>
  <div class="payment" :style="{marginTop:topMar+'px'}" v-else v-for="item in data" :key="item.id">
    <div class="top">
      <div class="title">
        <span>付款申请单</span>
      </div>
      <div class="date">
        <span>{{ year}}</span>年<span>{{month>9?month:'0'+month}}</span>月<span>{{day>9?day:'0'+day}}</span>日
      </div>
    </div>
    <div class="content">
      <div class="left-content">
        <div class="l-l-th">
          <div class="l-l-th-item">收款单位</div>
          <div class="l-l-td-item">{{item.companyName}}</div>
        </div>
        <div class="l-l-th">
          <div class="l-l-th-item">账    号</div>
          <div class="l-l-td-item">{{ item.account }}</div>
        </div>
        <div class="l-l-th">
          <div class="l-l-th-item">开户行</div>
          <div class="l-l-td-item">{{item.bankAddress}}</div>
        </div>
        <div class="l-l-th">
          <div class="l-l-th-item">金额</div>
          <div class="l-l-td-item">{{simpleAmountToChinese(item.amount)}}</div>
        </div>
        <div class="audit">
          <div class="l-l-th">
            <div class="audit-item">附件 &nbsp;&nbsp;&nbsp;张</div>
            <div class="audit-item money">¥  {{item.amount}}</div>
          </div>
          <div class="l-l-th line">
            <div class="audit-item">审 &nbsp;&nbsp;&nbsp;核</div>
            <div class="audit-item">财 &nbsp;&nbsp;&nbsp;务</div>
          </div>
          <div class="l-l-th">
            <div class="audit-item audit-height"></div>
            <div class="audit-item"></div>
          </div>
        </div>
      </div>
      <div class="right-content">
        <div class="r-t-content">
          付 款 原 因
        </div>
        <div class="user-content">
          {{item.remark}}
        </div>
      </div>
    </div>
    <div class="foot">
      <p>会计：</p>
      <p>记账：</p>
      <p>复核：</p>
      <p>出纳：</p>
      <p>制单：</p>
      <p>签收：&nbsp;&nbsp;&nbsp;</p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
import { useGroupList } from '../../store';

const useGroup = useGroupList()
const data = computed(() => useGroup.groupList)

// 获取年月日
const date = new Date();
const year = date.getFullYear();
const month = (date.getMonth() + 1);
const day = date.getDate();

// 换算大写
function simpleAmountToChinese(amount:number) {
  const digits = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
  const units = ['', '拾', '佰', '仟', '万', '拾', '佰', '仟', '亿'];
  
  let [integer, decimal] = Math.abs(amount).toFixed(2).split('.');
  let result = amount < 0 ? '负' : '';
  
  // 转换整数部分
  if (integer === '0') {
    result += '零';
  } else {
    for (let i = 0; i < integer.length; i++) {
      const digit = parseInt(integer[i]);
      const unit = units[integer.length - i - 1];
      
      if (digit !== 0) {
        result += digits[digit] + unit;
      } else if (result.slice(-1) !== '零') {
        result += '零';
      }
    }
    result = result.replace(/零+$/, '').replace(/零+/g, '零');
  }
  
  result += '元';
  
  // 转换小数部分
  const jiao = parseInt(decimal[0]);
  const fen = parseInt(decimal[1]);
  
  if (jiao === 0 && fen === 0) {
    result += '整';
  } else {
    if (jiao > 0) result += digits[jiao] + '角';
    if (fen > 0) result += digits[fen] + '分';
  }
  
  return result;
}
// 增加上边距
const topMar = ref(0)
const addTop = ()=>{
  topMar.value += 10
}
const rmoveTop = ()=>{
  if(topMar.value>0){
    topMar.value -= 10
  }
}
const isPrintShortcutPressed = ref(false); // 控制按钮显隐

// 组合键白名单 (允许触发打印的组合键)
const PRINT_SHORTCUTS = [
  { key: 'p', osModifier: 'winKey' },     // Win+P
  { key: 'p', osModifier: 'metaKey' },    // Cmd+P (Mac)
];

const handleKeyDown = (e: KeyboardEvent) => {
  // 检查是否是预定义的打印快捷键
  const matchedShortcut = PRINT_SHORTCUTS.find(shortcut => {
    return (
      e.key === shortcut.key && e[shortcut.osModifier]
    );
  });

  if (matchedShortcut) {
    isPrintShortcutPressed.value = true; // 隐藏按钮
    // 可选：阻止默认打印行为（如需完全接管打印逻辑）
    // e.preventDefault();
  }
  setTimeout(() => {
    isPrintShortcutPressed.value = false; // 恢复按钮
  }, 2000);
};

// 重置标志位（当快捷键释放时）
const handleKeyUp = (e: KeyboardEvent) => {
  if (PRINT_SHORTCUTS.some(shortcut => e.key === shortcut.key)) {
    isPrintShortcutPressed.value = false; // 恢复按钮
  }
};

// 生命周期管理
onMounted(() => {
  window.addEventListener('keydown', handleKeyDown);
  window.addEventListener('keyup', handleKeyUp);
});

onBeforeUnmount(() => {
  window.removeEventListener('keydown', handleKeyDown);
  window.removeEventListener('keyup', handleKeyUp);
});
</script>
<style lang="scss" scoped>
.payment{
  .top{
    margin-top: 30px;
    .title{
      span{
        font-size: 24px;
        letter-spacing: 10px;
        text-align: center;
        color: #3c70c3;
        font-weight: bold;
        border-bottom: 2px solid #3c70c3;
      }
    }
    .date{
      span{
        color: #3c70c3;
        padding: 0 10px
      };
    }
  }
  .content{
    display: flex;
    justify-content: space-between;
    border: 2px solid #3c70c3;
    .left-content{
      .l-l-th{
        display: flex;
        line-height: 40px;
        .l-l-th-item{
          border-right: 2px dashed #3c70c3;
          border-bottom: 2px dashed #3c70c3;
          color: #3c70c3;
          font-weight: bold;
          width: 140px;
          // padding: 0 20px;
        }
        .l-l-td-item{
          border-bottom: 2px dashed #3c70c3;
          border-right: 2px dashed #3c70c3;
          padding-left: 10px;
          width: 350px;
          flex: 1;
        }
        &:last-child .l-l-th-item{
          border-bottom: none;
        }
      }
      .audit{
        .l-l-th{
          display: flex;
          color: #3c70c3;
          font-weight: bold;
          .audit-item{
            flex: 1;
            border-right: 2px dashed #3c70c3;
            border-bottom: 2px dashed #3c70c3;
            line-height: 30px;
            text-align: center;
          }
          &:first-child .audit-item{
            border-bottom: none;
          }
          &:last-child .audit-item{
            border-bottom: none;
          }
        }
        .money{
          color: black;
          background-color: #b6cef2;
        }
      }
      .line{
        border-top: 2px solid #3c70c3;
      }
      .audit-height{
        height: 80px;
      }
    }
    .right-content{
      .r-t-content{
        border-bottom: 2px dashed #3c70c3;
        line-height: 40px;
        padding: 0 20px;
        font-weight: bold;
        color: #3c70c3;
      }
      .user-content{
        // height: 160px;
        padding: 15px 20px;
      }
    }
  }
  .foot{
    color: #3c70c3;
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    p{
      margin: 0;
    }
    padding-bottom: 40px;
  }
  
  
  border-bottom: 2px dashed #ccc;
  &:last-child{
    border-bottom: none;
  }
}
</style>